<template>
	<view>
		<headerinfo></headerinfo>
		<u-navbar title="家庭" :placeholder="true" :autoBack="true"></u-navbar>
		<view class="xuanke">
			<view class="list">
				<view class="title">
					<view>{{ item.realname?item.realname:' - ' }}  </view>
					<image  @click="toInfo(item)" v-if="item.avatar" :src="item.avatar" mode="aspectFill" style="width: 70rpx;height: 70rpx;border-radius: 50%;"></image>
				</view>
				<view class="main">
					<view class="box">
						<span>{{ item.nickname }}</span>
					</view>
					<view class="box">
						<span>{{ item.phone ? item.phone : '-' }}</span>
					</view>
				</view>
				<view class="main bodernone">
					<view class="box">
						<span>性别</span>
						<span>{{ item.sex == 'female' ?'女' : '男' }}</span>
					</view>
					<view class="box">
						<span>年龄</span>
						<span>{{ item.age ? item.age : '-' }}</span>
					</view>
					<view class="box">
						<span>出生地点</span>
						<span>{{ item.birthplace ? item.birthplace : '-' }}</span>
					</view>
					<view class="">
						<view class="box">
							<span>出生日期</span>
							<span>{{ item.birthday ? item.birthday : '-' }}</span>
						</view>
						<view class="box">
							<span>生平</span>
							<span>{{ item.remark ? item.remark : '-' }}</span>
						</view>
						
					</view>
		
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {  },
	data() {
		return {
			id:'',
			item:{}
		};
	},
	onLoad(e) {
		if(e.id){
			this.id =e.id
			this.getData()
		}
	},

	methods: {
		toInfo(item){
			console.log(item)
			// uni.previewImage({
			// 	urls:[img],
			// 	current:0
			// })
			let id = item.id
			let username = item.username?item.username:''
			if(username){
				uni.navigateTo({
					url:`/pages/card/index?id=${id}&username=${username}`
				})
			}else{
				uni.navigateTo({
					url:`/pages/card/index?id=${id}`
				})
			}
		},
		getData(){
			let data = {
				familyMemberId:this.id,
			}
			this.$api.getMemberInfo(data).then(res=>{
				console.log(res)
				this.item = res
			})
		}
	}
};
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
</style>
<style lang="scss">
	
	.xuanke {
		width: 540px;
		margin: 0 auto;
		box-shadow: 0 0 3px #ccc;
		.list {
			width: 100%;
			margin-top: 10rpx;
			padding: 20rpx;
			background-color: #fff;
			box-sizing: border-box;
	
			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
				padding-bottom: 15rpx;
				font-size: 30rpx;
			}
		}
	
		.main {
			padding-top: 15rpx;
			border-bottom: 1px solid #f5f5f5;
	
			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 23rpx;
				font-size: 28rpx;
			}
	
			.seeMore {
				font-size: 26rpx;
				text-align: center;
				color: #0081ff;
				padding-bottom: 20rpx;
			}
		}
	
		.bodernone {
			border: none;
		}
	}
	
	
	
	::v-deep .u-tabbar--fixed{
		width: 540px;
		left: 50%;
		transform: translateX(-50%);
		background-color: #f2f2f2;
	}
	
	::v-deep .u-navbar--fixed{
		width: 540px;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
